<template>
  <div class="password">
    <p class="lable">手机号</p>
    <form>
      <special-input
        :fnName="'getMobile'"
        :placeholder="'请输入手机号'"
        @getMobile="getMobile"
      ></special-input>
      <p class="lable">验证码</p>
      <special-input
        :fnName="'getCode'"
        :placeholder="'请输入验证码'"
        :clearable="false"
        :ifGetCode="true"
        :codeStatus="tools.validate.mobileValidate(this.mobile)"
        @getCode="getCode"
        @getPhoneCode="getPhoneCode"
      ></special-input>
    </form>
    <p class="errorMsg" v-show="errorMessage">{{ errorMessage }}</p>
    <button :class="{ 'login': true, 'cp': true , 'forbidLogin': !ifLogin }" @click="login">立即登录</button>
    <p class="more clearfix">
      <span class="register fl cp" @click="goRegister">注册</span>
    </p>
  </div>
</template>

<script>
import specialInput from './input'
export default {
  data () {
    return {
      mobile: '',
      code: ''
    }
  },
  computed: {
    // 判断是否能够登录（校验输入框内容长度）
    ifLogin () {
      const boolean = this.tools.validate.mobileValidate(this.mobile) && this.tools.validate.phoneCodeValidate(this.code)
      return boolean
    },
    // 错误提示消息
    errorMessage: {
      get () {
        return this.$store.state.user.errorMessage
      },
      set () {}
    }
  },
  components: {
    specialInput
  },
  methods: {
    // 获取手机号
    getMobile (value) {
      this.mobile = value
      if (this.errorMessage) {
        this.resetErrorMessage()
      }
    },
    // 获取验证码
    getCode (value) {
      this.code = value
      if (this.errorMessage) {
        this.resetErrorMessage()
      }
    },
    // 重置错误信息
    resetErrorMessage () {
      this.$store.commit('user/set_errorMessage', '')
    },
    // 去注册
    goRegister () {
      this.$router.push('/signUp')
    },
    // 获取手机验证码
    getPhoneCode () {
      if (this.tools.validate.mobileValidate(this.mobile)) {
        this.$store.commit('common/set_showImgDialog', true)
        this.$store.commit('common/set_fnName', 'user/getPhoneCode')
        this.$store.commit('common/set_fnParams', { phone: this.mobile })
        this.$store.commit('common/set_imgCode', '', { root: true })
        // this.$store.dispatch('user/getPhoneCode', this.mobile).then(res => {
        //   if (res.data.code !== 200) {
        //     this.errorMessage = res.data.message
        //   }
        // })
      }
    },
    // 验证码登录
    login () {
      this.$store.dispatch('user/loginByCode', { phone: this.mobile, password: this.code }).then(res => {
        if (res.data.code !== 200 && res.data.code !== 502) {
          this.errorMessage = res.data.message
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.password {
  .lable {
    color: #2e3f64;
    font-size: 14PX;
    margin-bottom: 4PX;
  }

  .errorMsg {
    text-align: center;
    color: #ff625e;
    font-size: 14PX;
    padding-top: 8PX;
  }

  .login {
    width: 400PX;
    height: 48PX;
    background-image: linear-gradient(-44deg, #4a53ef 0%, #6971fe 100%);
    border: none;
    color: #fff;
    font-size: 16PX;
    margin-top: 8PX;
  }

  .forbidLogin {
    background: #ebedf3;
    cursor: not-allowed;
  }

  .more {
    margin-top: 16PX;
    .register {
      color: #304EEC;
      font-size: 14PX;
    }
  }
}
</style>
